<!--
// 
// VeryMap.vue
// 海石后台管理
// 
// 2024/12/03.
// 
-->
<template>
    <div class="VeryMap">
        <div :id="mapElemId" class="map_container"></div>
    </div>
</template>

<script setup>
import {ref, reactive, computed, onMounted} from "vue";
import * as aMap from "./aMap.js";
import * as bMap from "./bMap.js";

const mapElemId = `map_id_${Math.floor(Math.random() * (99999 - 10000 + 1)) + 10000}`

const props = defineProps({});
const emits = defineEmits(['ready']);

const app = {}

const initMap = () => {
    if ($config.map === "A_MAP") {
        aMap.initMap(mapElemId, map => app.map = map)
    }
    if ($config.map === "B_MAP") {
        bMap.initMap(mapElemId, map => app.map = map)
    }
    emits("ready", app.map);
}

onMounted(() => {
    initMap()
})
</script>

<style scoped lang="scss">
.VeryMap {
    width: 100%;
    height: 100%;
    .map_container {
        width: 100%;
        height: 100%;
    }
}
</style>